<template>
  <div class="container">
    <div class="table-data">
      <el-card class="box-card">
        <el-row
          style="
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <!-- 顶部新增、全选删除 -->
          <el-col :span="10">
            <!-- 新增 -->
            <el-button
              type="warning"
              icon="el-icon-plus"
              size="small"
              @click="richtext"
              >新增</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deletemore"
              >删除</el-button
            >
          </el-col>

          <!-- 搜索 -->
          <el-col :span="4" :offset="10">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>

        <!-- 添加(富文本编辑器) -->
        <div v-if="EDIshow" class="editorclass">
          <h1 class="title">添加富文本</h1>
          <el-form :model="form" class="editorform">
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <!-- 富文本编辑器 -->
          <editors></editors>
          <div class="richbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="addrichtext"
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="addrichtext"
              >提交</el-button
            >
          </div>
        </div>

        <!-- 修改(富文本编辑器) -->
        <div v-if="EDIchange" class="editorclass">
          <h1 class="title">信息修改</h1>
          <el-form :model="form" class="editorform">
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.id"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <!-- 富文本编辑器 -->
          <editors :pid="11"></editors>
          <div class="richbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="offchangetext"
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="changetext"
              >提交</el-button
            >
          </div>
        </div>

        <!-- 表单数据（增、删、改、禁） -->
        <el-table
          v-if="TABLEshow"
          :data="dataShow"
          stripe
          border
          @selection-change="selectionchange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="编号" prop="id"> </el-table-column>
          <el-table-column label="标题" prop="title"> </el-table-column>
          <!-- <el-table-column label="故事内容" prop="info"> </el-table-column> -->
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button
                size="mini"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
              <!-- 删除 -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
              <!-- 禁用 -->
              <el-button
                size="mini"
                type="danger"
                @click="forbiddendata(scope.$index, scope.row)"
                >禁用</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="TABLEshow">
          <el-pagination
            style="margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="arraylength"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import editors from "../wangeditor";
export default {
  data() {
    return {
      EDIshow: false,
      TABLEshow: true,
      EDIchange: false,
      namesearch: "",
      form: {
        id: "",
        title: "",
        info: "",
      },
      changeform: {
        id: "",
        title: "",
        info: "",
      },
      dataShow: [],
      alldataShow: [],
      formLabelWidth: "120px",
      currentPage4: 1,
      arraylength: 0,
      pagesize: 4,
      page: 1,
      moment: [],
      deleteall: [],
      changearr: [],
      indexnum: 0,
    };
  },

  components: {
    editors,
  },

  methods: {
    //添加按钮
    richtext() {
      this.EDIchange = false;
      this.EDIshow = true;
      this.TABLEshow = false;
    },

    // 取消添加作品内容
    offrichtext() {
      this.EDIshow = false;
      this.TABLEshow = true;
    },

    // 添加作品内容-富文本
    addrichtext() {
      this.EDIshow = false;
      this.TABLEshow = true;
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取title
      let title = this.form.title;
      // 获取info

      let info = localStorage.getItem("info");

      // console.log("title->",title,"info->",info);

      // 通过接口添加数据
      this.$http
        .post("api/admin/storyAddModify", {
          token: token,
          title: title,
          info: info,
        })
        .then((res) => {
          // console.log("添加数据-->", res);
          // 渲染数据

        this.getStoryData();
        });
    },

    // 取消修改作品内容
    offchangetext() {
      this.EDIchange = false;
      this.TABLEshow = true;
    },

    // 提交修改
    changetext() {
      this.EDIchange = false;
      this.TABLEshow = true;
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取title
      let title = this.changeform.title;
      // 获取info

      let info = localStorage.getItem("info");
      // 获取id
      let id = this.changeform.id;
      // 获取富文本的html
      // let info = localStorage.getItem("info");
      // console.log("info", info);
      // 通过接口添加数据
      console.log("修改故事");
      this.$http
        .post("api/admin/storyAddModify", {
          token: token,
          title: title,
          info: info,
          // info: info,
          id: id,
        })
        .then((res) => {
          console.log("修改数据", res);
          // 渲染数据
         this.getStoryData();
        });
    },

    // 添加作品数据
    addwork() {},

    // 刷新
    refresh() {
      this.namesearch = "";
    },

    // 搜索数据
    searchdata() {},

    // selection删除
    selectionchange(value) {
      // console.log("selectionchange->value->", value);
      this.deleteall = value;
      // console.log("this.deleteall->", this.deleteall);
    },

    // 删除多条数据
    deletemore() {
      console.log("deletemore");
      let maxpage = Math.ceil(this.alldataShow.length / this.pagesize);
      this.deleteall.forEach((element) => {
        // 获取token
        let token = sessionStorage.getItem("token");
        // 获取id
        let id = element.id;
        // 通过id删数据
        this.$http
          .post("api/admin/storyDelete", {
            token: token,
            id: id,
          })
          .then((res) => {
            console.log("删除多条数据", res);
            // 渲染数据
           this.getStoryData();
          });
      });
      // 渲染数据
    },

    // 信息修改
    handleEdit(index, row) {
      console.log(row);
      // 设置id数据
      localStorage.setItem("workId", JSON.stringify(row.id));
      this.EDIchange = !this.EDIchange;
      this.TABLEshow = !this.TABLEshow;
      this.changeform.id = row.id;
      this.changeform.title = row.title;
      this.changeform.info = row.info;
      // 数据索引
    },

    // 删除单条数据
    handleDelete(index, row) {
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取id
      let id = row.id;
      console.log("id--->", id);

      // 通过接口删除数据
      this.$http
        .post("api/admin/storyDelete", {
          token: token,
          id: id,
        })
        .then((res) => {
          console.log("删除数据", res);
          // 渲染数据
          this.getStoryData();
        });
    },

    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      // 渲染数据
      this.getStoryData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      // 渲染数据
      this.getStoryData();
    },

    // 作品禁用按钮
    forbiddendata(index, row) {
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取id
      let id = row.id;
      // 通过接口删除数据
      this.$http
        .post("api/admin/storyBan", {
          token: token,
          id: id,
        })
        .then((res) => {
          // console.log("禁用数据->", res);
          this.getStoryData();
        });
    },

    // 渲染数据
    drawing() {
        this.dataShow = this.alldataShow;
    },
    // handleSizeChange() {},
    // handleCurrentChange() {},
    // handleSelectionChange() {},
    getStoryData() {
      var newdata = [];

      // 通过接口获取作品数据
      this.$http
        .post("api/admin/storyList", {
          token: this.token,
          page: this.page,
          size: this.pagesize,
        })
        .then((res) => {
          console.log(res);
          newdata = res.data.data.data;
          // console.log(newdata);
          // 数组赋值
          this.alldataShow = [];
          newdata.forEach((element) => {
            var arr = { id: "", title: "", info: "" };
            arr.info = element.info;
            arr.title = element.title;
            arr.id = element.story_id;
            this.alldataShow.push(arr);
          });

          // this.alldataShow.reverse();
          // 根据id排序
          this.alldataShow.sort(function (a, b) {
            return a.id - b.id;
          });
          this.arraylength = res.data.data.count;
          this.drawing();
        });
    },
  },

  // 监听搜索框状态
  watch: {
    namesearch: {
      handler: function (newVal, oldVal) {
        // 修改radio
      },
      deep: true,
    },
    namesearch: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
  },

  mounted() {
    // 获取token
    this.token = sessionStorage.getItem("token");
    this.getStoryData();
  },
};
</script>

<style lang="less" scoped>
//
.top-btn {
  display: flex;
}
.el-icon-refresh-left {
  display: flex;
  align-items: center;
}
.el-table .white {
  background: white;
}
.el-table .blue {
  background: rgb(18, 191, 235);
}
.el-table .red {
  background: rgb(236, 92, 66);
}
.el-table .purple {
  background: rgb(230, 108, 179);
}
.editorclass {
  padding: 0 50px 0 0;
}
.editorform {
  display: flex;
  // justify-content: flex-start;
  flex-direction: column;
}
.txtarea {
  width: 98%;
}
.title {
  display: flex;
  justify-content: center;
}
.richbtn {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
// 公共table
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
  .editor {
    width: 96%;
    margin-left: 2%;
  }
}
</style>
